<template>
  <Card>
    <div>
      <Row style="text-align:left;padding:10px 0;">
        <Col span="12">
        <Input v-model="queryStr" placeholder="类型/品牌/测能类型">
        <Button slot="append" icon="ios-search" type="info" @click.native="query(queryStr)"></Button>
        </Input>
        </Col>
        <Col span="12" style="text-align:right;">
        <!-- <Button type="success" icon="android-add-circle" @click="add()">新增</Button> -->
        </Col>
      </Row>
      <Table border :columns="columns7" :data="tableList"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="40" size="small" show-elevator :page-size="25" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
      </Row>
      <Modal v-model="modal1" title="详情" width="720" @on-cancel="cancel" @on-ok="ok" :scrollable="true">
        <DeviceMonitorForm ref="refDeviceInfoForm" @deviceInfoModalSuccess="deviceInfoModalSuccess"></DeviceMonitorForm>
        <div slot="footer">
          <Button type="ghost" @click="modal1=!modal1">关闭</Button>
        </div>
      </Modal>
    </div>
  </Card>
</template>
<script>
import DeviceMonitorForm from '../monitor/DeviceMonitorForm.vue'
export default {
  components: { DeviceMonitorForm },
  data: function () {
    return {
      pageIndex: 0,
      tableList: [],
      totalElements: 0,
      queryStr: '',
      modal1: false,
      columns7: [{
        title: '设备编码',
        key: 'deviceCode',
        align: 'center'
      }, {
        title: '类型',
        key: 'deviceTypeId',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.deviceTypeId.name)
          ])
        }
      }, {
        title: '型号',
        key: 'deviceTypeId',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.deviceTypeId.model)
          ])
        }
      }, {
        title: '品牌',
        key: 'deviceTypeId',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.deviceTypeId.brand)
          ])
        }
      }, {
        title: '读取频率',
        key: 'deviceTypeId',
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('span', params.row.deviceTypeId.frequency)
          ])
        }
      },
      {
        title: '空间名字',
        key: 'spaceName',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.modalShow()
                  this.$refs.refDeviceInfoForm.updateFormdata(params.row)
                }
              }
            }, '详情'),
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click: () => {
                  let self = this
                  let config = {
                    title: '提示',
                    content: '您确定删除吗？',
                    onOk: function () {
                      self.deleteOne(params.row.id)
                    }
                  }
                  this.$Modal.confirm(config)
                }
              }
            }, '删除')
          ])
        }
      }]
    }
  },
  created: function () {
    // console.log('--created--')
    this.list()
  },
  mounted: function () {
    // console.log('--mounted--')
  },
  destroyed: function () {
    // console.log('--destroyed--')
    this.$Message.destroy()
  },
  methods: {
    modalShow: function () {
      /* this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
      }) */
      this.modal1 = true
    },
    modalHide: function () {
      this.modal1 = false
    },
    remove: function (index) {
      this.tableList.splice(index, 1)
    },
    ok: function () { this.$Message.info('Clicked ok') },
    cancel: function () { this.$Message.info('Clicked cancel') },
    // 数据list
    list: function () {
      let self = this
      let getData = {
        'size': 20,
        'page': self.pageIndex,
        'searchParam': self.queryStr
      }
      self.tableList = []
      window.myapi.dev_list(getData).then(function (res) {
        if (res.data.status === 200) {
          self.tableList = res.data.data.content.reverse()
          self.totalElements = res.data.data.totalElements
        } else {
          let msg = res.data.msg ? res.data.msg : '请求数据失败!'
          self.$Message.error({ content: msg, duration: 5, closable: true })
        }
      }).catch(function (e) {
        let msg = e.response.data.message ? e.response.data.message : '请求数据失败!'
        self.$Message.error({ content: msg, duration: 5, closable: true })
      })
    },
    // 第几页
    pageChange: function (index) {
      let self = this
      self.pageIndex = index - 1
      self.list()
    },
    // 每页显示多少
    pageSizeChange: function (index) {
      console.log(index)
    },
    // 删除
    deleteOne: function (id) {
      let self = this
      let arr = []
      arr.push(id)
      let postData = arr
      window.myapi.dev_del(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.error('删除数据成功!')
          self.list()
        } else {
          let msg = res.data.msg ? res.data.msg : '删除数据失败!'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        self.$Message.error('删除数据失败!')
      })
    },
    // 查询
    query: function (str) {
      let self = this
      self.queryStr = str
      self.pageIndex = 0
      self.list()
    },
    // deviceInfoModalSuccess
    deviceInfoModalSuccess: function () {
      let self = this
      self.modalHide()
      self.list()
    },
    // 新增
    add: function () {
      let self = this
      self.modalShow()
      self.$refs.refDeviceInfoForm.updateFormdata({})
    }
  }
}

</script>
